@tailwind base;

@tailwind components;

@layer components {
    body {
        @apply bg-slate-50 h-screen w-full text-black flex flex-col overflow-y-scroll;
        @apply font-sans;
    }

    .btn-primary {
        @apply flex flex-row place-content-center items-center justify-items-center;
        @apply text-white bg-blue-800;
        @apply rounded;
        @apply font-semibold;
    }

    .input-primary {
        @apply bg-slate-100;
        @apply rounded;
        @apply border border-slate-300;
        @apply p-2;
        @apply w-full;
    }

    button {
        @apply btn-primary;
    }

    button.ui-disabled {
        @apply bg-slate-400;
    }

    a {
        @apply text-blue-500 font-semibold;
    }

    a:hover {
        @apply cursor-pointer;
    }

    select {
        @apply h-10 w-full lg:w-64 px-2 pb-2 pt-1 rounded border border-gray-500 bg-slate-100 text-lg;
        @apply overflow-hidden text-ellipsis;
    }

    .loading {
        @apply flex flex-row justify-center items-center;
        @apply mx-auto;
        @apply animate-spin-slow;
    }

    .animate-spin-slow {
        @apply animate-spin;
        animation: spin 5s linear infinite;
    }

    .progress-bar {
        @apply animate-progress-bar;
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 45%, rgba(37, 99, 235, 1) 50%, rgba(0, 0, 0, 0) 60%);
        background-size: 200% 200%;
    }

    .form-tick:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
        background-size: 100% 100%;
        background-position: 50%;
        background-repeat: no-repeat;
    }

    .checkbox {
        @apply form-tick appearance-none border border-secondary rounded-md cursor-pointer;
        @apply checked:bg-action checked:border-transparent focus:outline-none;
    }

    .content {
        @apply flex flex-col;
    }

    .nav-bar {
        @apply flex flex-row gap-x-6;
        @apply border-b border-slate-300;
        @apply mx-8 my-8;
        @apply text-xl;
        @apply w-full lg:w-2/3 mx-auto;
    }

    .nav-bar > div {
        @apply cursor-pointer;
        @apply text-slate-700;
        @apply px-4;
        @apply hover:border-b-8 hover:border-slate-300;
    }

    .nav-bar > div.selected {
        @apply text-black font-semibold;
        @apply border-b-8 border-black;
    }

    .header-outer {
        @apply sticky top-0;
        @apply py-4;
        @apply bg-black;
        @apply z-40;
    }

    .header {
        @apply flex flex-row;
        @apply justify-between items-center;
        @apply gap-x-2;
        @apply w-full lg:w-2/3 mx-auto;
    }

    .header .left {
        @apply flex flex-row gap-x-6;
    }

    .header .left .links {
        @apply flex flex-row gap-x-6 justify-between items-center;
        @apply text-xl;
    }

    .header .left .links a:link, .header .left .links a:visited {
        @apply text-white;
    }

    .header .right {
        @apply flex flex-row justify-end items-center gap-x-6;
    }

    .header .right .install {
        @apply flex flex-row justify-center items-center gap-x-1;
        @apply text-xl;
        @apply text-white;
    }

    .header .right .installation {
        @apply w-full lg:w-auto lg:ml-auto;
        @apply flex flex-row gap-x-4 items-center;
    }

    .header .right .installation > span {
        @apply text-xl font-semibold;
    }

    .header .right .avatar > img {
        @apply rounded-full border-2 border-gray-400 h-9 w-9;
    }

    .header .right .logout a:link, .header .right .logout a:visited {
        @apply text-white;
    }

    .logo-text {
        @apply uppercase text-2xl font-bold my-auto;
    }

    .main-content {
        @apply flex flex-col w-full;
        @apply mb-20;
    }

    .page .v-pair {
        @apply grid grid-cols-1 grid-rows-2;
    }

    .page .h-pair {
        @apply flex flex-col;
        @apply lg:grid lg:grid-cols-10 lg:grid-rows-1 lg:gap-x-2;
        @apply justify-center items-center content-center;
    }

    .page .h-pair div:first-child {
        @apply col-span-3;
        @apply flex flex-row items-center;
    }

    .page .h-pair div:last-child {
        @apply col-span-7;
        @apply flex flex-row items-center;
    }

    .work-manifests {
        @apply w-full mx-auto;
        @apply flex flex-col;
        @apply py-2;
    }

    .work-manifests .page {
        @apply flex flex-col;
        @apply gap-4;
    }

    .work-manifests .page .item {
        @apply p-4;
        @apply bg-slate-100;
        @apply rounded-lg border border-gray-400;
        @apply flex flex-col lg:flex-row;
    }

    .work-manifests .page .item .details {
        @apply flex flex-col gap-y-4;
        @apply w-full px-2;
    }

    .work-manifests .page .item .details h1 {
        @apply text-xl text-center;
        @apply font-semibold;
        @apply py-1;
        @apply my-2;
        @apply border-b border-slate-300;
    }

    .work-manifests .page .item .details .attrs {
        @apply grid grid-cols-1 lg:grid-cols-2;
        @apply w-full xl:w-4/5;
        @apply mx-auto;
    }

    .work-manifests .page .item .details .title {
        @apply font-semibold text-3xl;
    }

    .work-manifests .page .item .name {
        @apply font-semibold flex-shrink;
    }

    .work-manifests .page .item .status {
        @apply w-24;
        @apply flex flex-col gap-x-2 items-center justify-items-center;
        @apply mx-auto;
    }

    .work-manifests .page .item .status-text {
        @apply font-semibold;
    }

    .work-manifests .page .item .commit-sha {
        @apply text-ellipsis overflow-hidden;
    }

    .work-manifests .query > div > form {
        @apply flex flex-row;
    }

    .work-manifests .query > div > form > input {
        @apply input-primary;
        @apply rounded-none rounded-l;
    }

    .work-manifests .query > div > form > button.btn-search {
        @apply btn-primary;
        @apply px-2;
        @apply rounded-none;
        @apply border-t border-t-blue-800;
        @apply border-b border-b-blue-800;
    }

    .work-manifests .query > div > form > button.btn-search.ui-disabled {
        @apply bg-slate-400;
        @apply border-t border-t-slate-400;
        @apply border-b border-b-slate-400;
    }

    .work-manifests .query > div > form > button.btn-clear {
        @apply btn-primary;
        @apply px-2;
        @apply rounded-none rounded-r;
        @apply border-l border-l-white;
        @apply border-t border-t-blue-800;
        @apply border-b border-b-blue-800;
    }

    .work-manifests .query > div > form > button.btn-clear.ui-disabled {
        @apply bg-slate-400;
        @apply border-t border-t-slate-400;
        @apply border-b border-b-slate-400;
    }

    .work-manifests .query details {
        @apply py-2;
    }

    .work-manifests .query .error {
        @apply font-semibold text-red-600;
    }

    .work-manifests .query summary {
        @apply py-2;
        @apply font-semibold;
        @apply cursor-pointer;
    }

    .work-manifests .query details .tql-help {
        @apply flex flex-col gap-y-4;
    }

    .work-manifests .query details .tql-help ul {
        @apply list-disc list-inside;
    }

    /* Start work manifest details */
    .work-manifest-details {
        @apply w-full;
        @apply flex flex-col gap-8;
        @apply items-center justify-items-center;
        @apply mx-auto;
    }

    .work-manifest-details > .details {
        @apply w-full lg:w-2/3;
        @apply grid grid-cols-2 gap-2;
    }

    .work-manifest-details > .details .title {
        @apply col-span-2;
        @apply flex flex-col gap-2;
        @apply pb-4;
        @apply border-b border-slate-300;
    }

    .work-manifest-details > .details .title h1 {
        @apply text-2xl;
        @apply font-semibold;
    }

    .work-manifest-details > .details .title h2 {
        @apply text-lg;
        @apply font-semibold;
        @apply text-slate-500;
    }

    .work-manifest-details > .details .title > * {
        @apply flex flex-row gap-2;
        @apply items-center justify-items-center;
    }

    .work-manifest-details > .details > div:not(.title) {
        @apply grid grid-cols-7 gap-2;
    }

    .work-manifest-details > .details > div:not(.title) > div:first-child {
        @apply font-semibold;
        @apply col-span-2;
    }

    .work-manifest-details > .details > div:not(.title) > div:last-child {
        @apply col-span-5;
    }

    .work-manifest-details > .details .state {
        @apply px-2;
        @apply uppercase;
        @apply font-semibold;
        @apply rounded;
        @apply text-white;
        @apply max-w-max;
    }

    .work-manifest-details > .details .state.aborted,
    .work-manifest-details > .details .state.failure {
        @apply bg-red-500;
    }

    .work-manifest-details > .details .state.success {
        @apply bg-green-500;
    }

    .work-manifest-details > .details .state.running,
    .work-manifest-details >  .details .state.queued {
        @apply bg-slate-500;
    }

    .work-manifest-details > .details .run-id {
        @apply flex flex-row gap-2;
    }

    .work-manifest-details > .details .run-id svg {
        @apply h-5 w-5;
    }

    .work-manifest-details > .details .tag-query {
        @apply font-mono;
    }

    .work-manifest-details .outputs-title {
        @apply w-full lg:w-2/3;
        @apply text-left;
        @apply text-2xl;
        @apply font-semibold;
        @apply border-b border-slate-300;
    }

    .work-manifest-details .outputs {
        @apply w-full lg:w-2/3;
        @apply flex flex-col gap-4;
    }

    .work-manifest-details .outputs .treeview {
        @apply w-full;
        @apply flex flex-col gap-2;
        @apply border-l-2 border-slate-300;
        @apply p-4;
    }

    .work-manifest-details .outputs .treeview .title {
        @apply flex flex-row gap-4;
        @apply items-center justify-items-center;
        @apply text-left font-semibold text-2xl;
    }

    .work-manifest-details .outputs .treeview .title.dirspace > div:nth-child(odd) {
        @apply font-semibold;
        @apply text-slate-500;
        @apply text-xl;
    }

    .work-manifest-details .outputs .treeview .title.cost-estimation > div:nth-child(2),
    .work-manifest-details .outputs .treeview .title.cost-estimation > div:nth-child(4) {
        @apply font-semibold;
        @apply text-slate-500;
        @apply text-xl;
    }

    .work-manifest-details .outputs .treeview .branch {
        @apply w-full;
        @apply flex flex-row gap-2;
    }

    .work-manifest-details .outputs .treeview .branch .expander button {
        @apply text-slate-500;
        @apply h-14 w-14;
        @apply ring-transparent;
    }

    .work-manifest-details .outputs .treeview .branch .expander button > div {
        @apply transition-all duration-300;
    }

    .work-manifest-details .outputs .treeview .branch .expander button > div.expanded {
        @apply rotate-45;
    }

    .work-manifest-details .outputs .treeview .branch .expander + div {
        @apply w-full;
    }

    .work-manifest-details .outputs .treeview .branch .node {
        @apply w-full;
        @apply pt-3;
    }

    .work-manifest-details .outputs .treeview .branch .node .step {
        @apply flex flex-row gap-4;
        @apply items-center justify-items-center;
        @apply text-left font-semibold text-xl;
    }

    .work-manifest-details .outputs .treeview .branch .node .step > div:nth-child(odd) {
        @apply font-semibold;
        @apply text-slate-500;
        @apply text-lg;
    }

    .work-manifest-details .outputs .treeview .branch .node .step .state {
        @apply px-2;
        @apply uppercase;
        @apply font-semibold;
        @apply rounded;
        @apply text-white;
        @apply text-base;
    }

    .work-manifest-details .outputs .treeview .branch .node .step .state.success {
        @apply bg-green-500;
    }

    .work-manifest-details .outputs .treeview .branch .node .step .state.failure {
        @apply bg-red-500;
    }

    .work-manifest-details .outputs .treeview .leaf {
        @apply flex flex-col gap-4;
    }

    .work-manifest-details .outputs .treeview .leaf > div.cmd,
    .work-manifest-details .outputs .treeview .leaf > div.exit-code {
        @apply grid grid-cols-7;
    }

    .work-manifest-details .outputs .treeview .leaf > div.cmd > div:first-child,
    .work-manifest-details .outputs .treeview .leaf > div.exit-code > div:first-child {
        @apply col-span-1;
        @apply font-semibold;
    }

    .work-manifest-details .outputs .treeview .leaf > div.cmd > div:last-child,
    .work-manifest-details .outputs .treeview .leaf > div.exit-code > div:last-child {
        @apply col-span-6;
        @apply flex flex-row;
    }

    .work-manifest-details .outputs .treeview .leaf > div.cmd > div:last-child > div,
    .work-manifest-details .outputs .treeview .leaf > div.exit-code > div:last-child > div {
        @apply font-mono;
        @apply text-black bg-slate-200;
        @apply px-2;
    }

    .work-manifest-details .outputs .treeview .leaf > div.text {
        @apply font-mono;
        @apply text-black bg-slate-200;
        @apply p-2;
        @apply overflow-x-auto;
    }

    .work-manifest-details .outputs .treeview .child-node .cost-estimation {
        @apply flex flex-col gap-2;
    }

    .work-manifest-details .outputs .treeview .cost-estimation h2 {
        @apply text-xl font-semibold;
    }

    .work-manifest-details .outputs .treeview .branch .node .cost-estimation.summary > div:last-child {
        @apply grid grid-cols-3;
    }

    .work-manifest-details .outputs .treeview .branch .node .cost-estimation.summary > div:last-child .heading {
        @apply font-semibold
    }

    .work-manifest-details .outputs .treeview .leaf .cost-estimation.details > div:last-child {
        @apply grid grid-cols-5
    }

    .work-manifest-details .outputs .treeview .leaf .cost-estimation.details > div:last-child .heading {
        @apply font-semibold
    }
    /* End work manifest details */

    /* Start dirspaces */
    .dirspaces {
        @apply w-full lg:w-11/12 mx-auto;
        @apply flex flex-col;
        @apply py-2;
    }

    .dirspaces .page {
        @apply flex flex-col;
        @apply gap-2;
        @apply text-slate-800;
    }

    .dirspaces .page .heading {
        @apply p-2;
        @apply grid grid-cols-12;
        @apply font-semibold;
        @apply capitalize;
        @apply bg-slate-300;
        @apply rounded-lg;
    }

    /* Status */
    .dirspaces .page .heading > div:nth-child(1),
    .dirspaces .page .item > div:nth-child(1) {
        @apply col-span-1;
        @apply text-center;
        @apply my-auto;
    }

    /* Directory */
    .dirspaces .page .heading > div:nth-child(2),
    .dirspaces .page .item > div:nth-child(2) {
        @apply col-span-2;
        @apply my-auto;
    }

    /* Workspace */
    .dirspaces .page .heading > div:nth-child(3),
    .dirspaces .page .item > div:nth-child(3) {
        @apply col-span-1;
        @apply my-auto;
    }

    /* Repo/branch */
    .dirspaces .page .heading > div:nth-child(4),
    .dirspaces .page .item > div:nth-child(4) {
        @apply col-span-2;
        @apply my-auto;
    }

    /* Target */
    .dirspaces .page .heading > div:nth-child(5),
    .dirspaces .page .item > div:nth-child(5) {
        @apply col-span-4;
        @apply my-auto;
    }

    /* Created at */
    .dirspaces .page .heading > div:nth-child(6),
    .dirspaces .page .item > div:nth-child(6) {
        @apply col-span-1;
        @apply my-auto;
        @apply text-center;
    }

    /* Action */
    .dirspaces .page .heading > div:nth-child(7),
    .dirspaces .page .item > div:nth-child(7) {
        @apply col-span-1;
        @apply text-center;
        @apply mx-auto;
        @apply my-auto;
    }

    .dirspaces .page .item {
        @apply grid grid-cols-12 gap-2;
        @apply p-2;
    }

    .dirspaces .page .item .icon {
        @apply h-5 w-5;
    }

    .dirspaces .page .item .icon > button {
        @apply h-5 w-5;
        @apply bg-transparent;
        @apply text-blue-500;
    }

    .dirspaces .page .item:nth-child(odd) {
        @apply bg-slate-100;
    }

    .dirspaces .page .item .operation {
        @apply flex flex-col;
        @apply items-center justify-items-center;
    }

    .dirspaces .page .item .operation .op {
        @apply uppercase font-semibold;
    }

    .dirspaces .page .item .operation .state {
        @apply py-1 px-2;
        @apply uppercase;
        @apply font-semibold;
        @apply rounded;
        @apply text-white;
    }

    .dirspaces .page .item .operation .state.aborted {
        @apply bg-red-500;
    }

    .dirspaces .page .item .operation .state.failure {
        @apply bg-red-500;
    }

    .dirspaces .page .item .operation .state.unknown {
        @apply bg-red-500;
    }

    .dirspaces .page .item .operation .state.success {
        @apply bg-green-500;
    }

    .dirspaces .page .item .operation .state.running {
        @apply bg-slate-500;
    }

    .dirspaces .page .item .operation .state.queued {
        @apply bg-slate-500;
    }

    .dirspaces .page .item .dir > div,
    .dirspaces .page .item .workspace > div {
        @apply inline-block;
        @apply relative top-[3px];
        @apply px-2;
    }

    .dirspaces .page .item .repo-branch {
        @apply flex flex-col;
        @apply truncate;
    }

    .dirspaces .page .item .repo-branch > div {
        @apply flex flex-row gap-1;
        @apply items-center justify-items-center;
    }

    .dirspaces .page .item .target.pull-request {
        @apply flex flex-col;
    }

    .dirspaces .page .item .target.pull-request div:first-child {
        @apply flex flex-row gap-1;
        @apply items-center justify-items-center;
    }

    .dirspaces .page .item .target.pull-request div:last-child {
        @apply truncate;
    }

    .dirspaces .page .item .target.drift,
    .dirspaces .page .item .target.index {
        @apply flex flex-row gap-2;
    }

    .dirspaces .page .item .created_at {
        @apply flex flex-col;
        @apply items-center justify-items-center;
    }

    .dirspaces .page .item .created_at > div {
        @apply flex flex-row gap-1;
    }

    .dirspaces .page .item .target.drift,
    .dirspaces .page .item .target.index {
        @apply flex flex-row;
    }

    .dirspaces .page .item .action-details a {
        @apply bg-blue-800;
        @apply p-2;
        @apply text-white;
        @apply rounded;
    }

    .dirspaces .query {
        @apply w-full lg:w-2/3;
        @apply mx-auto;
    }

    .dirspaces .query > div > form {
        @apply flex flex-row;
    }

    .dirspaces .query > div > form > input {
        @apply input-primary;
        @apply rounded-none rounded-l;
    }

    .dirspaces .query > div > form > button.btn-search {
        @apply btn-primary;
        @apply px-2;
        @apply rounded-none;
        @apply border-t border-t-blue-800;
        @apply border-b border-b-blue-800;
    }

    .dirspaces .query > div > form > button.btn-search.ui-disabled {
        @apply bg-slate-400;
        @apply border-t border-t-slate-400;
        @apply border-b border-b-slate-400;
    }

    .dirspaces .query > div > form > button.btn-clear {
        @apply btn-primary;
        @apply px-2;
        @apply rounded-none rounded-r;
        @apply border-l border-l-white;
        @apply border-t border-t-blue-800;
        @apply border-b border-b-blue-800;
    }

    .dirspaces .query > div > form > button.btn-clear.ui-disabled {
        @apply bg-slate-400;
        @apply border-t border-t-slate-400;
        @apply border-b border-b-slate-400;
    }

    .dirspaces .query details {
        @apply py-2;
    }

    .dirspaces .query .error {
        @apply font-semibold text-red-600;
    }

    .dirspaces .query summary {
        @apply py-2;
        @apply font-semibold;
        @apply cursor-pointer;
    }

    .dirspaces .query details .tql-help {
        @apply flex flex-col gap-y-4;
    }

    .dirspaces .query details .tql-help ul {
        @apply list-disc list-inside;
    }
    /* End dirspaces */

    .pull-requests {
        @apply mx-auto;
        @apply flex flex-col;
    }

    .pull-requests .page {
        @apply flex flex-col;
        @apply gap-4;
    }

    .pull-requests .page .item {
        @apply bg-slate-100;
        @apply rounded-lg border border-gray-400;
        @apply flex flex-col lg:flex-row gap-x-2 items-stretch;
    }

    .pull-requests .page .item .details {
        @apply flex flex-col w-full;
        @apply px-2 py-4;
    }

    .pull-requests .page .item .details .title {
        @apply font-semibold text-3xl;
    }

    .pull-requests .page .item .name {
        @apply font-semibold flex-shrink;
    }

    .pull-requests .page .item .state {
        @apply w-28 p-4;
        @apply mx-auto;
        @apply flex flex-col gap-x-2 place-content-center items-center justify-items-center;
    }

    .pull-requests .page .item .state .text {
        @apply font-semibold;
    }

    .pull-requests .page .item .details-link {
        @apply my-auto p-2;
    }

    .pull-requests .page .item .details-link button {
        @apply flex flex-row lg:flex-col place-content-center items-center justify-items-center;
        @apply w-full p-2;
        @apply btn-primary;
    }

    .repos {
        @apply w-full lg:w-11/12;
        @apply mx-auto;
    }

    .repos-toolbar {
        @apply flex flex-row flex-wrap items-center gap-x-4;
    }

    button.repos-refresh {
        @apply btn-primary;
        @apply pl-2;
    }

    .repos-page {
        @apply grid grid-cols-2;
    }

    .repos-page .page-header {
        @apply border-b border-slate-300;
        @apply font-bold text-xl;
    }

    .repos-page div {
        @apply font-semibold;
        @apply border-b border-slate-200;
        @apply py-2;
    }

    .repos-page div:nth-child(even) {
        @apply text-right;
    }

    .page-nav {
        @apply flex flex-row gap-2 justify-end py-2;
    }

    .page-nav button {
        @apply flex flex-row justify-center items-center justify-items-center;
        @apply w-24 py-1;
        @apply btn-primary;
    }

    .page-nav button.ui-disabled {
        @apply bg-slate-400;
    }

    .animate-spin-slow {
        animation: spin 3s linear infinite;
    }

    .dirspace-table {
        @apply grid grid-cols-3 w-full;
        @apply gap-1;
        @apply text-center;
    }

    .dirspace-table .table-header {
        @apply font-semibold text-lg;
        @apply border-b py-1;
    }

    .dirspace-table > div:not(.table-header) {
        @apply text-ellipsis overflow-hidden;
        direction: rtl;
    }

    .details-header {
        @apply py-4 text-2xl font-semibold text-center;
    }

    .billing-info {
        @apply w-full lg:w-2/3 mx-auto;
        @apply justify-around justify-items-center;
        @apply flex flex-row flex-wrap;
        @apply text-slate-800;
    }

    .billing-info .item {
        @apply flex flex-col gap-2;
        @apply text-center;
    }

    .billing-info .item > div:first-child {
        @apply font-semibold;
    }

    .billing-info .item > div {
        @apply flex flex-row justify-center justify-items-center;
    }

    .billing-link {
        @apply flex flex-row gap-2;
        @apply text-center;
    }

    a.setup-repo {
        @apply flex flex-row items-center justify-end;
    }

    .setup-repo {
        @apply w-full lg:w-2/3;
        @apply mx-auto;
    }

    .setup-repo-title {
        @apply text-center text-4xl;
        @apply font-bold;
    }

    .setup-repo-help {
        @apply flex flex-col;
        @apply gap-y-8;
        @apply w-2/3;
        @apply mx-auto;
        @apply rounded-lg border border-slate-300;
        @apply bg-slate-100;
        @apply text-center text-xl;
        @apply py-8;
    }

    .setup-repo-help h1 {
        @apply text-4xl font-semibold;
    }

    .setup-repo-step {
        @apply flex flex-col gap-y-8;
        @apply py-8;
    }

    .setup-repo-step h1 {
        @apply text-2xl font-semibold;
    }

    .setup-repo-step img {
        @apply w-1/2;
        @apply mx-auto;
        @apply rounded-lg;
    }

    .setup-repo-step-number {
        @apply font-semibold text-xl;
    }

    button.setup-repo-copy {
        @apply flex flex-row gap-2;
        @apply btn-primary;
        @apply p-2;
    }

    .workflow-file {
        @apply relative;
        @apply bg-slate-100;
        @apply border border-slate-300;
        @apply rounded-md;
    }

    .workflow-file-content {
        @apply max-h-96 overflow-auto;
    }

    .workflow-file-copy {
        @apply absolute top-0 right-0;
        @apply px-4 py-2;
    }

    .setup-repo-step .cloud-provider-list {
        @apply list-disc list-inside;
        @apply pl-8 py-3;
    }

    .setup-repo-step .cloud-provider-list li {
        @apply py-1;
    }

    pre.hl {
        @apply font-mono text-sm;
        @apply p-8;
    }

    .hl.slc {
        @apply text-red-700;
    }

    .hl.kwa {
        @apply font-semibold text-green-700;
    }

    .notifications {
        @apply fixed top-0 w-full;
        @apply flex flex-col gap-y-4;
        @apply p-4;
        @apply z-50;
    }

    .notifications > .notification {
        @apply animate-fade-in;
    }

    .notifications > .notification > .success {
        @apply rounded-lg;
        @apply w-full h-full;
        @apply bg-green-500;
        @apply flex flex-row items-center justify-center;
        @apply p-4;
        box-shadow: 0 0 15px 0px rgba(34, 197, 94, 1);
    }

    body > .login {
        @apply mx-auto;
        @apply py-20;
        @apply flex flex flex-col gap-8;
        @apply text-center;
        @apply text-2xl;
    }

    body > .login .logo {
        @apply mx-auto;
        @apply h-14;
    }

    body > .login .logins {
        @apply mx-auto;
        @apply flex flex-col gap-4;
    }

    body > .login .logins > div > a {
        @apply flex flex-row gap-2;
        @apply justify-center items-center;
        @apply px-8 py-4;
        @apply text-black;
        @apply border-2 border-slate-500;
        @apply rounded;
        @apply hover:bg-slate-100;
    }

    .quickstart-page {
        @apply flex flex-col items-center justify-center;
        @apply max-w-6xl mx-auto;
        @apply py-8 px-4;
    }

    .quickstart-header {
        @apply text-center mb-12;
        @apply flex flex-col items-center justify-center;
    }

    .quickstart-logo {
        @apply h-16;
    }

    .quickstart-welcome {
        @apply text-4xl font-bold text-gray-900 mb-4;
    }

    .quickstart-subtitle {
        @apply text-xl text-gray-600 max-w-2xl;
    }

    .quickstart-options {
        @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
        @apply w-full max-w-4xl;
    }

    .quickstart-option {
        @apply bg-white rounded-lg border border-gray-200 shadow-lg;
        @apply flex flex-col;
        @apply transition-all hover:shadow-xl hover:border-blue-300;
    }

    .quickstart-option-content {
        @apply p-8 flex-grow;
    }

    .quickstart-option-header {
        @apply flex items-center gap-4 mb-6;
    }

    .quickstart-icon {
        @apply text-blue-600 text-3xl;
    }

    .quickstart-title {
        @apply text-2xl font-bold text-gray-900;
    }

    .quickstart-description {
        @apply text-lg text-gray-700 mb-6;
    }

    .quickstart-features {
        @apply space-y-3 mb-6;
    }

    .quickstart-features li {
        @apply flex items-center gap-3;
    }

    .feature-check {
        @apply text-green-600 text-xl;
    }

    .quickstart-meta {
        @apply flex justify-between items-center;
        @apply text-sm text-gray-500;
    }

    .quickstart-note {
        @apply bg-gray-100 px-3 py-1 rounded-full;
    }

    .quickstart-time {
        @apply bg-blue-100 text-blue-800 px-3 py-1 rounded-full;
        @apply font-medium;
    }

    .quickstart-option-footer {
        @apply p-6 bg-gray-50 border-t border-gray-100;
    }

    .quickstart-button {
        @apply w-full py-3 px-6;
        @apply bg-blue-600 hover:bg-blue-700 text-white;
        @apply rounded-lg font-semibold;
        @apply flex items-center justify-center gap-2;
        @apply transition-colors;
        @apply no-underline;
    }

    .quickstart-button-secondary {
        @apply w-full py-3 px-6;
        @apply bg-slate-200 hover:bg-slate-300 text-black;
        @apply rounded-lg font-semibold;
        @apply flex items-center justify-center gap-2;
        @apply transition-colors;
        @apply no-underline;
    }

    .quickstart-button:hover {
        @apply text-white no-underline;
    }

    .button-icon {
        @apply text-lg;
    }

    .gitlab-add-installation {
        @apply w-full;
        @apply justify-center items-center;
        @apply flex flex-col;
        @apply gap-y-8;
        @apply mx-auto;
    }

    .gitlab-add-installation ol {
        @apply list-disc;
    }

    .gitlab-add-installation li {
        @apply hover:bg-slate-200;
        @apply px-4 py-2;
        @apply rounded-md;
    }

    .gitlab-add-installation h1 {
        @apply text-2xl font-semibold;
    }

    .gitlab-add-installation h2 {
        @apply text-xl font-semibold;
    }

    .gitlab-add-installation .movement-btns {
        @apply flex flex-row;
        @apply gap-x-8;
    }

    .gitlab-add-installation .movement-btns button {
        @apply text-lg;
        @apply py-2 px-3;
    }
}

@tailwind utilities;

